

import React from 'react';
import { IMessageItem } from './type';
import { observer } from 'mobx-react-lite';
import { useStore } from '@/store';
interface IBaseProps {
    children?: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.PromiseLikeOfReactNode | null | undefined;
    showDesPos?: boolean;
    message: IMessageItem
    onToParent?: (id: string) => void
}
function MsgBaseComp(props: IBaseProps) { 
    const { message, children,onToParent } = props
    const isBig = message.isBig
    const showDesPos = message.isBig
    const store = useStore()

    const isDefaultMsg = "DEFAULT_MESSAGE" === message.id
    const {username,avatar } = store.user.userInfo
    const userField = isDefaultMsg ? '' : ' @' + username
    return (
        <div className={`messageItem ${showDesPos?'hasDesPos':''}`}>
            <div className="aiLogo">
                <img src="https://s.tuguaishou.com/editor/image/ai/pic_menu_aidraw.png" />
            </div>
            {showDesPos&&<span className="linkLine"></span>}
            <div className="aiMessageContent">
                {showDesPos && <div className="authorInfo" onClick={() => { 
                    onToParent && onToParent(message.pid as string)
                }}>
                    <div className="headPic">
                        <img src={avatar} alt="" />
                    </div>
                    <span className='name'>{ username}</span>
                    <p className='authorText'>{ message.content +userField}</p>
                </div>}
                <h4>
                    <strong>怪兽AI绘图-机器人</strong>
                    { !isDefaultMsg ?<span className='tag'>文生图</span>:null}
                    <span className='date'>{ message.created}</span>
                </h4>
                <p className="textNeed" dangerouslySetInnerHTML={{ __html: message.content +(showDesPos?',放大':'') + userField}} ></p>
                { children && children}
            </div>
        </div>
    )
}

export const MsgBase = observer(MsgBaseComp)